// 导入React
import React from "react";

/**
 * 目标：this.state的基本使用
 * 创建一个类组件，显示当前时间
 * 1. 创建类组件
 * 2. 创建构造函数
 * 3. 在构造函数函数中初始化状态容器
 * 4. 在标签中显示状态数据
 * 5. 修改组件状态
 */

class Timer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      time: new Date().toLocaleTimeString(),
    };
  }

  render() {
    return (
      <div>
        <h1>当前时间是</h1>
        <h2>{this.state.time}</h2>
        <button
          onClick={() =>
            this.setState({ time: new Date().toLocaleTimeString() })
          }
        >
          点击查看最新时间
        </button>
      </div>
    );
  }
}

export default Timer;
